<template>
    <div class="loginContainer">
        <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;"
            @click="back">返回</el-button>
        <div class="formBOX">
            <div style="font-weight:600;font-size:24px;margin-bottom:20px;">自定义指令</div>

            <el-button type="primary" @click="dialogVisible = true">输入</el-button>
            <div style="margin-top:20px;">弹框输入的数据：{{ ruleForm.age }}</div>
        </div>

        <div style="返回数据"></div>

        <PopWindow :dialogVisible="dialogVisible" title="自定义指令输入" sizeType="small" :btnType="2" @closeWin="closeWin">
            <div>
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="120px" class="demo-ruleForm">
                    <el-form-item label="年龄">
                        <el-input v-model="ruleForm.age" v-num:reg="2" />
                    </el-form-item>
                </el-form>
            </div>
        </PopWindow>
    </div>
</template>
<!-- 自定义指令 -->
<script lang="ts" setup>
import PopWindow from '/@/components/PopWindow/index.vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
const ruleForm = ref({
    age: '',
    mobile: ''
})
const ruleFormRef = ref(null)
const dialogVisible = ref(false)
const closeWin = (type: boolean) => {
    if (type) {
        if (!ruleForm.value.age) {
            ElMessage({
                type: 'error',
                message: '请输入年龄'
            })
            return
        }
        console.log(ruleFormRef.value)
        dialogVisible.value = false
    } else {
        dialogVisible.value = false
    }
    console.log(ruleForm.value)
}

const back = async () => {
    window.history.back()

}
</script>
<style lang="scss" scoped>
.loginContainer {
    height: 100vh;
    width: 100vw;
    padding: 60px;
    cursor: pointer;
    box-sizing: border-box;
}

.loginTitle {
    margin: 20px auto;
}

.formBOX {
    width: 80%;
}

.loginBtn {
    line-height: 1;
    min-height: 40px;
    white-space: nowrap;
    cursor: pointer;
    background-color: #409EFF;
    border: none;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}
</style>
